// 封装一个专门用来维护 counter 相关的仓库模块

// 导入定义 Pinia 仓库的函数
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// defineStore 函数
// 作用：定义一个仓库
// 参数：① 仓库名称 ② 定义仓库的入口函数（组合式API）
// 返回值：是一个函数（storeSetup），调用该函数就能得到该仓库 store 实例
// 补充说明：返回值一般用 useXxxStore 命名的变量接收
const useCounterStore = defineStore('counter', () => {

  // 要定义的内容全部写到这个函数中
  //   state 状态 => ref、reactive 创建的响应式数据
  //   getters 计算属性 => computed 计算属性函数
  //   mutations => 普通函数
  //   actions => 普通函数

  // 用 Vue3 的 ref 替代 vuex 中的 state
  const count = ref(100) 

  // 用 Vue3 的 computed 函数 替代 Vuex 中的 getter
  const doubleCount = computed(() => count.value * 2)

  // 用 普通函数 替代 Vuex 中的 mutation
  const addCount = () => {
    count.value++
  }

  // 用 普通函数 替代 Vuex 中的 action
  const asyncAddCount = () => {
    setTimeout(() => {
      count.value++
    }, 1000);
  }

  // 一定要写到 return 的 {} 中，才能暴露出去，供外界使用
  return { count, doubleCount, addCount, asyncAddCount }
})

// 按需导出 useXxxStore 函数，供外界调用后获取 store 实例
export { useCounterStore }